import React, { Component } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import {
  InsuranceFilled,
  HomeFilled,
  FundFilled,
} from '@ant-design/icons'
import { connect } from 'react-redux'
import './index.css'
import { openNotification } from '../../util/util'

class index extends Component {
  state = {
  }
  openNotification = (e, toDoctor) => {
    // 未登录还想去医生界面
    if (!this.props.user.name && toDoctor) {
      openNotification({description: '请先登录'})
      e.preventDefault()
      return
    }
    // if (!toDoctor && this.props.user.isDoctor) {
    //   openNotification({description: '医生暂无权限访问此页面'})
    //   e.preventDefault()
    //   return
    // }
    // 患者想去医生界面
    if (toDoctor && !this.props.user.isDoctor) {
      openNotification({description: '患者暂无权限访问此页面'})
      e.preventDefault()
      return
    }
  }
  render() {
    const { pathname } = this.props.location
    const isShow = ['/medical', '/profile', '/doctor'].includes(pathname)
    return (
      <div className="tab">
        <div className="support" hidden={!isShow}>
          <span>医务组 技术支持</span>
        </div>
        <div className="t_tab" hidden={!isShow}>
          <NavLink to="/medical" onClick={(e) => this.openNotification(e, false)}>
            <InsuranceFilled className="icon" />
            <div className="title">医疗服务</div>
          </NavLink>
          <NavLink to="/profile">
            <HomeFilled className="icon" />
            <div className="title">个人中心</div>
          </NavLink>
          <NavLink to="/doctor" onClick={(e) => this.openNotification(e, true)}>
            <FundFilled className="icon" />
            <div className="title">医生专属</div>
          </NavLink>
        </div>
      </div>
    )
  }
}

// 让该一般组件能使用路由组件的 history 对象
export default connect(
  state => ({
    user: state.user
  }),
)(withRouter(index))

